<template>
    <div>
        <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-image width="100vw" height="300" :src="productData.img"
            @click="showImg">
        </van-image>
        <!-- 设置垂直间距 -->
        <van-row :gutter="[10, 10]">
            <van-col span="12" style="color: red; font-size: 20px; font-weight: 800;">￥{{ productData.price}}</van-col>
            <van-col span="24" class="title">{{productData.name}}</van-col>
            <van-col span="24" class="title2">{{ productData.subName }}</van-col>
        </van-row>
        <div class="plist">
            <van-row>
                <van-col span="4">
                    <img src="https://img10.360buyimg.com/img/jfs/t1/20724/31/20118/5100/6386d180Ef7435661/b73a0d4e3f653a22.png"
                        alt="" width="65" height="21">
                </van-col>
                <van-col span="16" style="color: #f94343;font-size: 12px; line-height: 20px;">
                    入选3月『膨化食品金榜』TOP20
                </van-col>
                <van-col span="4">
                    <van-icon name="play-circle-o" style="color: red; line-height: 20px;padding-left:52px;" />
                </van-col>
            </van-row>
        </div>
        <!-- 居中 -->
        <van-row justify="center" style="margin-top: 20px;">
            <van-col span="6">

                <img src="https://img11.360buyimg.com/img/jfs/t1/185923/19/38125/325/64fad71dFeef526f9/f11f072077880807.png"
                    width="16" height="16" style="padding-top: 2px;">
                <span style="color: #d7d5d5;font-size: 16px; padding-left: 5px; ">分享</span>

            </van-col>
            <van-col span="6">
                <!-- 设置垂直间距 -->
                <van-row :gutter="[20, 20]">
                    <van-col span="3">
                        <van-icon name="star-o" size="20" style="color: #808080 ;" />
                    </van-col>
                    <van-col span="10" style="color: #d7d5d5;font-size: 16px;">收藏</van-col>
                </van-row>

            </van-col>
            <van-col span="8">
                <van-row :gutter="[20, 20]">
                    <van-col span="3">
                        <van-icon name="bill-o" size="20" style="color: #808080 ;" />
                    </van-col>
                    <van-col span="16" style="color: #d7d5d5;font-size: 16px;">降价通知</van-col>
                </van-row>
            </van-col>
        </van-row>
        <hr style="background-color:#d7d5d5; color: aliceblue;">
        <div class="brief" v-html="productData.brief">
           
        </div>

        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" dot @click="onClickIcon" />
            <van-action-bar-icon icon="cart-o" text="购物车" badge="5" @click="onClickIcon" />
            <van-action-bar-icon icon="shop-o" text="店铺" dot @click="onClickIcon" />
            <van-action-bar-button type="warning" text="加入购物车" @click="onClickButton" />
            <van-action-bar-button type="danger" text="立即购买" @click="onClickButton" />
        </van-action-bar>

    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue';
import { showImagePreview } from 'vant';
import { ProductApi } from "../api"
const onClickLeft = () => history.back();

const imageslist =ref([] as any)
const showImg = () => { 
    console.log("点击打开图片");
    showImagePreview({
        images:imageslist.value,
        startPosition: 1,
        closeOnPopstate: true,
        closeOnClickImage: true,
        vertical: true,
        closeable: true,
        
    });
}
import { useRoute } from 'vue-router';
const route = useRoute()
const id = ref(0)

const productData = reactive({
    name:'',
    price:0,
    img:'',
    brief: '',
    subName:''
})
onMounted(() => { 
    id.value=Number(route.query.id)
    console.log(id.value);
    CallproductApi()
})
const CallproductApi = () => {
    ProductApi.select.call({id:id.value}).then((res:any) => {
        console.log(res);
        productData.name=res[0].name
        productData.subName = res[0].subName
        productData.price = res[0].price
        productData.img = res[0].img
        productData.brief = res[0].brief

        imageslist.value = productData.img.split(',')
    })
}


const onClickIcon = () => {
    console.log("点击图标");
}
const onClickButton = () => {
    console.log("点击按钮");
}
</script>

<style scoped>
.plist{
    width: 90%;
    height: 20px;
    margin: 0 auto;
    background-color: #f0c8c8;
    border-radius: 10px;
    margin-top: 10px;

}
.brief{
    margin-top: 10px;
}
.title{
    font-size:20px;
}
</style>